<template>
	<view class="lee-wrap">
		<view class="p10">
			<u--input prefixIcon="search" placeholder="请输入门店名称" border="none" shape="circle"
				:customStyle="{background:'#f5f5f5',height:'60rpx',paddingLeft:'20rpx'}" v-model="newParams.store_name"
				@input="toSearch">
			</u--input>
		</view>
		<view class="container">
			<view class="lee-tab-view menu-scroll-view bf5" :scroll-top="scrollTop" :scroll-into-view="itemId">
				<view v-for="(item,index) in typeList" :key="index" class="lee-tab-item"
					:class="[current == index ? 'lee-tab-item-active' : '']"
					:style="{color:current==index?'#000':'',fontWeight:current==index?'bold':''}"
					@click.stop="swichMenu(index)">
					<text class="u-line-1">{{item.label}}</text>
				</view>
			</view>
			<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box"
				@scrolltolower="scrolltolower" :refresher-triggered="triggered">
				<view class="page-view">
					<view class="class-item" :id="'item' + index" v-for="(item , index) in storeList" :key="index">
						<view class="card c3 mb10 cshow">
							<view class="content">
								<view style="display: flex;justify-content: space-between;align-items: center;">
									<view class="content-text" style="font-size: 36rpx;font-weight: 700;">
										#{{ item.id }}
									</view>
									<view class="content-text" style="display: flex;align-items: center;">状态：
										<u-tag :type="audi_statusList[item.audi_status].type" size="mini" plain
											:text="audi_statusList[item.audi_status].name">
										</u-tag>
									</view>
								</view>
								<view class="content-text">门店名称：{{item.store_name}}</view>
								<view class="content-text">POI：{{item.dy_poi_id}}
								</view>
								<view class="content-text">
									手机号：{{item.phone}}</view>
								<view class="content-text">
									OEM：{{item.oem_name}}</view>

								<view class="content-text shenheimg">
									门店资质：
									<img :src="item.qualifications" @click="yulan(item.qualifications)" class="img"
										v-if="item.qualifications.length > 0" />
								</view>
								<view class="content-text shenheimg">
									食品许可证：
									<img :src="item.business_license" @click="yulan(item.business_license)" class="img"
										v-if="item.business_license.length > 0" />
								</view>
								<view class="content-text" v-if="item.audi_status == 2 || item.audi_status == ''">
									拒绝原因：<span style="color: red;">{{ item.reject_reason }}</span></view>
								<u-collapse :border="false" v-if="item.audi_status == 0 || item.audi_status == 2">
									<u-collapse-item title="操作" name="Docs guide" icon="setting">
										<view class="setting">
											<button type="primary" @click="shenheAndJuJue(item,1)" size="mini"
												v-if="(item.audi_status == 0 || item.audi_status == 2) && menus.includes('store/store/store_audi')"
												class="storeBtn">通过</button>
											<button type="primary" @click="shenheAndJuJue(item,2)" size="mini"
												v-if="(item.audi_status == 0 || item.audi_status == 2) && menus.includes('store/store/store_audi')"
												class="storeBtn">拒绝</button>
										</view>
									</u-collapse-item>
								</u-collapse>
							</view>
						</view>
					</view>
					<view style="width: 100%;height: 200rpx;"></view>
					<view v-if="storeList.length==0" class="np f-c-c">
						<view class="iconfont icon-queshengtu cb" style="font-size: 90rpx;"></view>
						<view class="f12 cb mt20">暂无门店</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<u-popup :show="deliveryShow" mode="center" :round="10">
			<view class="popup">
				<view class="header">确认{{name}}该门店？</view>
				<uni-data-select v-model="refuse" :localdata="classfiyArr" @change="classChange" :clear="false"
					v-if="status == 2"></uni-data-select>
			</view>
			<view class="footer">
				<u-button @click="close">取消</u-button>
				<u-button type="primary" @click="confirm">确认</u-button>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		mapState,
	} from 'vuex'
	import site from '@/custom/siteroot.js';
	export default {
		data() {
			return {
				typeList: [{
						label: '全部',
						value: 0,
					},
					{
						label: '待审核',
						value: 1,
					},
					{
						label: '审核成功',
						value: 2,
					},
					{
						label: '审核失败',
						value: 3,
					},
				],
				newParams: {
					page: 1,
					limit: 20,
					store_name: '',
					phone: '',
					audi_status: '',
				},
				hasLoadedData: false,
				storeList: [],
				audi_statusList: {
					'0': {
						type: 'info',
						name: '待审核',
					},
					'1': {
						type: 'success',
						name: '审核通过',
					},
					'2': {
						type: 'error',
						name: '审核拒绝',
					},
				},
				current: 0,
				refuse: '',
				deliveryShow: false,
				status: '',
				name: '',
				classfiyArr: [],
				storeId: ''
			}
		},
		computed: {
			...mapState({
				menus: state => state.menus,
			}),
		},
		methods: {
			// 获取门店列表
			getlists() {
				uni.showLoading()
				this.beg.request({
					url: '/admin/store.Store/index',
					method: 'post',
					data: this.newParams
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						res.data.data.forEach((v) => {
							if (v.qualifications != null && v.qualifications != '') {
								let qualifications;
								try {
									qualifications = JSON.parse(v.qualifications);
								} catch (error) {
									console.error('解析 JSON 出错:', error);
									qualifications = [];
								}

								if (Array.isArray(qualifications)) {
									v.qualifications = qualifications.map((item) => {
										return site.siteimgroot + item;
									});
								} else {
									console.error('qualifications 不是一个数组:', qualifications);
									v.qualifications = [];
								}
							} else {
								v.qualifications = [];
							}
							if (v.business_license != null && v.business_license != '') {
								let business_license;
								try {
									business_license = JSON.parse(v.business_license);
								} catch (error) {
									console.error('解析 JSON 出错:', error);
									business_license = [];
								}

								if (Array.isArray(business_license)) {
									v.business_license = business_license.map((item) => {
										return site.siteimgroot + item;
									});
								} else {
									console.error('business_license 不是一个数组:', business_license);
									v.business_license = [];
								}
							} else {
								v.business_license = [];
							}
						})
						let newData = res.data.data
						if (!this.hasLoadedData) {
							this.storeList = newData;
							this.hasLoadedData = true;
						} else {
							this.storeList = this.storeList.concat(newData);
						}
					}
				})
			},
			// 预览
			yulan(url) {
				uni.previewImage({
					urls: url
				})
			},
			// 点击左边的栏目切换
			async swichMenu(index) {
				if (index == 0) {
					this.newParams.audi_status = ''
				} else {
					this.newParams.audi_status = index - 1;
				}
				this.current = index;
				this.newParams.page = 1;
				this.hasLoadedData = false;
				this.storeList = []
				this.getlists()
			},
			toSearch() {
				this.hasLoadedData = false;
				this.getlists()
			},
			// 拒绝原因
			getJujueList() {
				this.beg.request({
					url: '/admin/routine.Config/list_turn_down_statement',
					method: 'post',
				}).then(res => {
					if (res.code == 1) {
						var classfiy = []
						res.data.list.forEach(i => {
							classfiy.push({
								value: i.language,
								text: i.language
							})
						})
						this.classfiyArr = classfiy
					}
				})
			},
			classChange(e) {
				this.refuse = e
			},
			// 同意/拒绝
			shenheAndJuJue(val, v) {
				this.storeId = val.id
				if (v == 1) {
					this.name = '通过'
				} else {
					this.name = '拒绝'
					this.getJujueList()
				}
				this.status = v
				this.deliveryShow = true
			},
			close() {
				this.refuse = ''
				this.deliveryShow = false
			},
			confirm() {
				uni.showLoading()
				if (this.status == 2) {
					if (this.refuse == '') {
						uni.$u.toast('请填写拒绝原因')
						return
					}
				} else {
					this.refuse = ''
				}
				this.beg.request({
					url: '/admin/store.Store/store_audi',
					method: 'post',
					data: {
						id: this.storeId,
						audi_status: this.status,
						reject_reason: this.refuse,
					}
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						uni.$u.toast(res.msg)
						this.deliveryShow = false
						this.refuse = ''
						setTimeout(res => {
							this.hasLoadedData = false;
							this.newParams.page = 1;
							this.getlists()
						}, 800)

					} else {
						uni.$u.toast(res.msg)
					}
				})
			},
			scrolltolower() {
				this.newParams.page++
				this.getlists()
			},
		},
		onLoad() {
			this.getlists()
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	$lee-tab-item-active: #c6ebff;

	.lee-wrap {
		height: 100%;
	}

	.container {
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		display: flex;
		flex: 1;
		height: 100%;
	}

	.lee-tab-view {
		width: 200rpx;
		height: 100%;
	}

	.lee-tab-item {
		height: 110rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;
	}

	.lee-tab-item-active {
		position: relative;
		font-size: 24rpx;
		font-weight: 500;
		background: #fff;
	}

	.page-view {
		background-color: #fff;
		padding: 16rpx;
	}

	.class-item {
		padding: 5rpx 5rpx;
		border-radius: 8rpx;
	}

	.navbar2 {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		background: #fff;
		box-shadow: 0 0rpx 8rpx 4rpx rgba(0, 0, 0, 0.05);
	}

	.status {
		display: flex;
		justify-content: start;
		align-items: center;
	}

	.content-text {
		margin-top: 10rpx;
	}

	.setting {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}

	.popup {
		width: 680rpx;
		height: 240rpx;
		padding: 30rpx;

		.propimg {
			width: 250rpx;
			height: 250rpx;
			box-shadow: 0px 1px 7px 0px #888888;
			position: relative;

			.image {
				width: 100%;
				height: 100%;
			}

			.secendImage {
				width: 70rpx;
				height: 70rpx;
				position: absolute;
				left: 0;
				top: 0;
			}

			.tag {
				position: absolute;
				right: 0;
				top: 0;
			}
		}

		.xuan {
			border: 2px solid #036ee9;
		}
	}

	.footer {
		display: flex;
		justify-content: space-between;
		align-items: center;

		::v-deep .u-button--square {
			width: 30%;
		}
	}

	::v-deep .uni-forms-item {
		margin-bottom: 10rpx;
	}

	.storeBtn {
		background-color: #fdda34;
		color: #000;
		font-weight: 600;
		margin-top: 10rpx;
		margin-left: 20rpx;
	}

	.shenheimg {
		display: flex;
		align-items: center;
	}

	.img {
		width: 200rpx;
		height: 200rpx;
		border-radius: 15rpx;
	}

	.header {
		font-size: 35rpx;
		font-weight: 600;
		margin-bottom: 35rpx;
	}
</style>